[username]/opengraph-image.tsx - 用户OG图片

[username]/opengraph-image.tsx - 用户OG图片

基本信息

属性值
路径src/app/[username]/opengraph-image.tsx
类型Next.js OpenGraph Image 生成
功能动态生成用户资料的社交分享图片

功能描述

使用 Next.js 的 ImageResponse API 动态生成用户资料的 Open Graph 图片，用于社交媒体分享时显示预览。

导出配置

export const alt = "User Profile";
export const size = {
  width: 1200,
  height: 630,
};
export const contentType = "image/png";

导入依赖

import { ImageResponse } from "next/og";
import { db } from "@/lib/db";
import { getConfig } from "@/lib/config";

圆角映射

const radiusMap: Record<string, number> = {
  none: 0,
  sm: 8,
  md: 12,
  lg: 16,
};

主函数: OGImage({ params })

参数

参数类型说明
params.usernamestringURL 编码的用户名

处理流程

1. 解码用户名
2. 验证格式（必须以 @ 开头）
   └── 格式错误 → 返回 "User Not Found" 图片
3. 查询数据库获取用户信息
   └── 用户不存在 → 返回 "User Not Found" 图片
4. 统计用户获得的总点赞数
5. 格式化加入日期
6. 生成并返回图片响应

图片结构

整体布局

┌─────────────────────────────────────────┐
│  Brand Name                [Admin Badge]│  ← 顶部品牌栏
├─────────────────────────────────────────┤
│                                         │
│    ┌──────┐                             │
│    │Avatar│   User Name                 │  ← 主体内容区
│    │ or   │   @username                 │
│    │Init  │                             │
│    └──────┘   ┌────────┬────────┬─────┐ │
│               │Prompts │Upvotes │Join │ │  ← 统计信息
│               └────────┴────────┴─────┘ │
│                                         │
└─────────────────────────────────────────┘

视觉元素

元素样式
背景色#ffffff（白色）
主色调config.theme.colors.primary（默认 #6366f1）
头像圆形，带主色调边框
姓名56px，粗体，深色
用户名28px，灰色
统计卡片圆角背景，含图标

统计信息

统计项图标说明
Prompts文档图标用户发布的提示词数量
Upvotes向上箭头收到的总点赞数
Joined日历图标加入日期（如 "Jan 2024"）

错误处理

格式错误响应

当用户名不以 @ 开头时：

背景: #0a0a0a（深色）
文字: "User Not Found"
字号: 48px
颜色: 白色

用户不存在响应

与格式错误响应相同。

数据库查询

用户查询

const user = await db.user.findFirst({
  where: { username: { equals: username, mode: "insensitive" } },
  select: {
    id, name, username, avatar, role, createdAt,
    _count: { prompts }
  }
});

点赞统计

const totalUpvotes = await db.promptVote.count({
  where: { prompt: { authorId: user.id } }
});

日期格式化

const joinDate = new Intl.DateTimeFormat("en-US", {
  month: "short",
  year: "numeric",
}).format(user.createdAt);
// 输出示例: "Jan 2024"

技术细节

  • 使用内联 SVG 作为图标（无外部依赖）
  • 支持外部头像图片 URL
  • 头像加载失败时显示首字母占位符
  • 管理员角色显示特殊标识徽章

路由匹配

当访问 /@username 时，Next.js 自动使用此文件生成 OG 图片，URL 为 /@username/opengraph-image。

← 返回目录